<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .img{
            width: 200px;
            height: 300px;
            /* background-image: url(../img/banner01.jpg); */
            position: relative;
            overflow: hidden;
        }
        .intro{
            width: 200px;
            height: 120px;
            background-color:rgba(0, 0, 0, 0.3);
            position: absolute;
            transition: all 1s linear;
            left: 0;
            top: 300px;
            
        }
        .intro>p{
            margin: 10px;
            color: #ffffff;
        }
        .img:hover .intro{
            top: 180px;
        }
        .fc{
            display: block;
            margin: 50px auto;
            width: 400px;
            height: 400px;
            animation: rotating 1s linear 0s infinite;
        }
        @keyframes rotating{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        .loading{
            width: 300px;
            height: 158px;
            border: 1px solid #000000;
        }
        .loading>div{
            float: left;
            margin: 15px;
            border-radius: 15px;
            width: 30px;
            height: 100px;
            background-color: red;
            animation: loading 500ms ease 0s infinite alternate;
        
        }
        .loading>div:nth-child(2){
            background-color: green;
            animation-delay: 100ms;
        }
        .loading>div:nth-child(3){
            background-color: blue;
            animation-delay: 200ms;
        }
        .loading>div:nth-child(4){
            background-color: purple;
            animation-delay: 300ms;
        }
        .loading>div:nth-child(5){
            background-color: orange;
            animation-delay: 400ms;
        }
        .loading p{
            text-align: center;
        }
        @keyframes loading {
            from{
                transform: scale(1,1);
            }
            to{
                transform: scale(1,0.5);
            }
        }
        .walking{
            position: relative;
            margin: 50px auto;
            width: 120px;
            height: 180px;
            border: 1px solid #000000;
            overflow: hidden;
        }
        .walking img{
            position: absolute;
            top:0;
            left: 0;
            animation: walking 1s steps(8) 0s infinite;
        }
        @keyframes walking {
            form{
                left: 0;
            }
            to{
                left: -960px;
            }
        }
        .fz{
            position: relative;
            margin: 50px auto;
            width: 700px;
            height: 272px;
            border: 1px solid #000000;
            transform-style: preserve-3d;
        }
        .fz img{
            position: absolute;
            top: 0px;
            left: 200px;
            transform: perspective(700px) rotateY(0deg);
            transition: all 1s linear;
            backface-visibility: hidden;
        }
        .fz:hover  img{
            transform: rotateY(180deg);
        }
        .fz div{
            position: absolute;
            top: 0;
            left: 200px;
            width: 300px;
            height: 272px;
            background-color: pink;
            text-align: center;
            line-height: 272px;
            transform: perspective(700px) rotateY(-180deg);
            backface-visibility: hidden;
            transition: all 1s linear;
        }
        .fz:hover div{
            transform: perspective(700px) rotateY(0deg);
        }
    </style>
</head>
<body>
    <!-- 第一题 -->
    <div class="img">
        <img src="../img/banner01.jpg" alt="">
        <div class="intro">
            <h3>文字标题</h3>
            <p>图片说明文字</p>
        </div>
    </div><br><br><br>
    <!-- 第二题 -->
    <img src="../img/fengche.png">
    <div class="fc"></div><br>

    <!-- 第三题 -->
    <div class="loading">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div><br><br>
    <!-- 第四题 -->
    <div class="walking">
        <img src="../img/walking.png" alt="">
    </div><br><br>
    <!--  第五题 -->
    <div class="fz">
        <img src="../img/location_bg.jpg">
        <div>图片说明文字</div>
    </div>

</body>
</html>